<!-- #layout name=blank -->
<style>
    .edit-label-btn {
        opacity: 0;
    }
    
    .panel:hover .edit-label-btn {
        opacity: 1;
    }
</style>
<div class="page-header">
    <h1 class="title">Labels</h1>
    <div class="col-md-3 col-sm-4 col-xs-6 pull-right">
        <div class="row input-icon right">
            <i class="fa fa-search"></i>
            <input type="text" data-bind="textInput: keyword" class="form-control" style="height: 32px;" placeholder="Enter your keyword">
        </div>
    </div>
</div>
<div data-bind="component: { name: 'kb-breadcrumb', params:[{
        name: 'SITES'
    },{
        name: 'DASHBOARD'
    },{
        name: Kooboo.text.common.Labels
    }]}">
</div>
<div class="row" data-bind="visible: !labels().length">
    <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-12" style="margin-top: 40px;">
        <!-- ko if: !isSearching() -->
        <div class="panel panel-default">
            <div class="panel-body">
                <blockquote>
                    <p class="text-danger">You can use label to create your multilanguage content.</p>
                    <footer>You don't have a label yet</footer>
                </blockquote>
            </div>
            <div class="panel-footer" data-bind="text: Kooboo.text.common.empty"></div>
        </div>
        <!-- /ko -->
        <!-- ko if: isSearching() -->
        <div class="panel panel-default">
            <div class="panel-body">
                <blockquote>
                    <p class="text-danger" data-bind="text: Kooboo.text.common.empty"></p>
                    <footer>No label found</footer>
                </blockquote>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
<div class="row label-list">
    <!-- ko if: labels().length -->
    <!-- ko foreach: { data: labels, as: 'label', afterRender: rendered } -->
    <div class="col-md-4 col-sm-6 col-xs-12 item">
        <div class="panel panel-default">
            <div class="panel-body">
                <button type="button" class="close" data-bind="click: $parent.removeLabel.bind(this), tooltip: Kooboo.text.common.delete"><i class="fa fa-close"></i></button>
                <blockquote>
                    <!-- ko if: label.values[$parent.defaultLang()] -->
                    <p data-bind="text: label.values[$parent.defaultLang()]()"></p>
                    <!-- /ko -->
                    <!-- ko ifnot: label.values[$parent.defaultLang()] -->
                    <p class="text-red">Empty</p>
                    <!-- /ko -->
                    <footer data-bind="text: label.name"></footer>
                </blockquote>
                <!-- ko foreach: refers -->
                <a href="javascript:;" class="label label-sm kb-table-label-refer" data-bind="text: $data.text, click: $root.showRelationModal.bind($data), style: { background: $data.bgColor }"></a>
                <!-- /ko -->
            </div>
            <div class="panel-footer clearfix">
                <span data-bind="text: label.date, attr: { title: Kooboo.text.common.lastModified }"></span>
                <div class="pull-right">
                    <button class="btn btn-xs blue edit-label-btn" data-bind="click: $parent.editLabel.bind(this), tooltip: Kooboo.text.common.edit"><i class="fa fa-pencil"></i></button>
                    <a class="btn btn-xs blue edit-label-btn" data-bind="attr: { href: $data.versionUrl }, tooltip: Kooboo.text.common.viewAllVersions" href="javascript:;" target="_blank"><i class="fa fa-clock-o"></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- /ko -->
    <!-- /ko -->
</div>
<div data-bind="component: { name: 'kb-relation-modal' }"></div>
<div data-bind="modal: showEditModal" class="modal fade" data-backdrop="static" data-keyboard="fasle">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-bind="click: onHideEditModal"><i class="fa fa-close"></i></button>
                <h4 class="modal-title">Edit label</h4>
            </div>
            <div class="modal-body">
                <!-- ko if: editingLabel -->
                <!-- ko foreach: editingContent -->
                <div class="form-group">
                    <label data-bind="text: label, visible: label"></label>
                    <textarea class="form-control autosize" data-bind="value: value"></textarea>
                </div>
                <!-- /ko -->
                <!-- /ko -->
            </div>
            <div class="modal-footer">
                <button class="btn green" data-bind="click: onSaveEditModal">Save</button>
                <button class="btn gray" data-bind="click: onHideEditModal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/lib/waterfall.min.js",
            "/_Admin/Scripts/components/kbRelationModal.js",
            "/_Admin/Scripts/components/kbBreadcrumb.js",
            "/_Admin/Scripts/lib/jquery.textarea_autosize.min.js",
        ])
    })()
</script>
<script src="/_Admin/View/Contents/Labels.js"></script>